<template>
  <div v-loading="loading">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <el-button size="medium" type="primary" @click="visible = true">添加标签</el-button>
      </div>
      <div class="d-flex">
        <el-input size="medium" placeholder="请输入内容" prefix-icon="el-icon-search" 
          class="mr-3" v-model="name">
        </el-input>
        <el-button type="primary" size="medium" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <el-table :data="tags" class="mt-3" border>
      <el-table-column type="index" label="序号" align="center" width="100">
      </el-table-column>
      <el-table-column prop="name" label="标签名称">
      </el-table-column>
      <el-table-column label="当前状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state === 1 ? 'success' : 'error'">
            {{ scope.row.state === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最后修改时间" width="160" align="center">
        <template slot-scope="scope">
          {{$formatDateTime(scope.row.created_on)}}
        </template>
      </el-table-column>
      <el-table-column prop="create_by" label="修改人" width="120" align="center">
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template  slot-scope="scope">
          <el-button type="text" size="small">修改</el-button>
          <el-popconfirm :title="'确认删除 ' + scope.row.name +' 吗？'"
            @onConfirm="deleteTag(scope.row)">
            <el-button type="text" size="small" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增的标签 -->
    <el-dialog title="新增标签" :visible.sync="visible" @closed="closed">
      <el-form :model="form">
        <el-form-item label="标签名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="addTag" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  title: "标签列表",
  data() {
    return {
      name: '',
      tags: [],
      visible: false,
      loading: false,
      form: {
        name: '',
        state: 1,
	      CreatedBy: "qm"
      }
    }
  },
  created() {
    this.getAllTags()
  },
  methods: {
    getAllTags() {
      this.$get("/api/v1/tags").then(res => {
        const { code, data } = res.data
        if (code === 200) {
          this.tags = [...data]
        }
      })
    },
    addTag() {
      this.loading = true
      const { $post: post, form } = this
      post("/api/v1/tags", form).then(res => {
        this.$message.success('标签添加成功');
        this.visible = false
        this.getAllTags()
      }).finally(() => {
        this.loading = false
      })
    },
    deleteTag(row) {
      const {id} = row
      this.loading = true
      this.$delete(`/api/v1/tags/id`).then(res => {
        this.$message.success('标签删除成功');
        this.getAllTags()
      }).finally(() => {
        this.loading = false
      })
    },
    closed() {
      this.form.name = ""
    }
  }
}
</script>
<style lang="scss">
</style>